<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">

    <div style="float: left">

    </div>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="货架编号">
            <el-input v-model="formInline.shelvesNo" placeholder="输入货架编号"></el-input>
        </el-form-item>
        <el-form-item label="货位编号">
            <el-input v-model="formInline.cargoNo" placeholder="输入货位编号"></el-input>
        </el-form-item>
        <el-form-item label="货位状态">
            <el-select v-model="formInline.status" placeholder="选择货位状态">
                <el-option label="有货" value="有货"></el-option>
                <el-option label="无货" value="无货"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-divider><i></i></el-divider>
    <el-button type="primary" @click="open()">新建货位</el-button>
    <el-divider><i></i></el-divider>
    <div style="float: left">
        <span style="text-align: center">每页显示条数:</span>
        <template>
            <el-select v-model="value" @change="changePageSize">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </template>
    </div>
    <div style="float: right">
        <span style="text-align: center">搜索:</span>
        <el-input
            placeholder="请输入内容"
            v-model="search"
            clearable
            style="width: 200px;"
            @keyup.native="searchChange">
    </el-input>
    </div>

    <el-dialog title="新增货位" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="goodsLocation">
            <el-form-item label="*所属货区" :label-width="formLabelWidth">
                <template>
                    <el-select v-model="addWarehouse"
                               @change="warehouseChange"
                               placeholder="请选择仓库">
                        <el-option
                                v-for="item in selectWarehouse"
                                :key="item.id"
                                :label="item.wareName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </template>
                <template>
                    <el-select v-model="addCargoArea"
                               @change="cargoAreaChange"
                               placeholder="请选择货区">
                        <el-option
                                v-for="item in selectCargoArea"
                                :key="item.id"
                                :label="item.goodsName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="*货架编号" :label-width="formLabelWidth">
                <template>
                    <el-select v-model="addShelves"
                               placeholder="请选择货架">
                        <el-option
                                v-for="item in selectShelves"
                                :key="item.id"
                                :label="item.shelvesNo"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>

            <el-form-item label="*货位编号" :label-width="formLabelWidth">
                <el-input v-model="goodsLocation.cargoNo"  autocomplete="off"></el-input>
            </el-form-item>
<!--            <el-form-item label="*负责人" :label-width="formLabelWidth">-->
<!--                <el-input v-model="goodsLocation.person" autocomplete="off"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="*联系电话" :label-width="formLabelWidth">-->
<!--                <el-input v-model="goodsLocation.telephone" autocomplete="off"></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="*描述" :label-width="formLabelWidth">
                <el-input v-model="goodsLocation.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveRole()">确 定</el-button>
        </div>
    </el-dialog>

    <el-table
            ref="roleTable"
            :data="tableData"
            style="width: 100%;">
        <el-table-column label="序号">
            <template slot-scope="scope">
                <span >{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column label="货位编号">
            <template slot-scope="scope">
                <span >{{scope.row.cargoNo}}</span>
            </template>
        </el-table-column>
        <el-table-column label="所属货架编号">
            <template slot-scope="scope">
                <span >{{scope.row.tshelves[0].shelvesNo}}</span>
            </template>
        </el-table-column>
        <el-table-column label="所属货区名">
            <template slot-scope="scope">
                <span >{{scope.row.tcargoAreas[0].goodsName}}</span>
            </template>
        </el-table-column>
        <el-table-column label="所属仓库">
            <template slot-scope="scope">
                <span >{{scope.row.twares[0].wareName}}</span>
            </template>
        </el-table-column>
        <el-table-column label="负责人">
            <template slot-scope="scope">
                <span >{{scope.row.twares[0].person}}</span>
            </template>
        </el-table-column>
        <el-table-column label="联系电话">
            <template slot-scope="scope">
                <span >{{scope.row.twares[0].telephone}}</span>
            </template>
        </el-table-column>
        <el-table-column label="放置货物">
            <template slot-scope="scope">
                <span >{{scope.row.product}}</span>
            </template>
        </el-table-column>
        <el-table-column label="创建时间">
            <template slot-scope="scope">
                <span >{{scope.row.creatTime}}</span>
            </template>
        </el-table-column>
        <el-table-column label="状态">
            <template slot-scope="scope">
                <div style="background:#40e0d0;width: 50px;text-align: center" v-if="scope.row.status=='无货'">{{scope.row.status}}</div>
                <div style="background:#a9a9a9;width: 50px;text-align: center" v-if="scope.row.status=='有货'">{{scope.row.status}}</div>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="info" icon="el-icon-check" circle
                           @click="roleEdit(scope.$index,scope.row)"
                           v-if="scope.row.status=='有货'"></el-button>
                <el-button type="success" icon="el-icon-check" circle
                           @click="roleEdit(scope.$index,scope.row)"
                           v-if="scope.row.status=='无货'"></el-button>
                <el-button type="primary" icon="el-icon-edit" circle
                           @click="roleModify(scope.$index,scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="修改货位" :visible.sync="dialogFormVisible2" @close="closeMyDialog">
        <el-form :model="goodsLocation">
            <el-form-item label="货位编号" :label-width="formLabelWidth">
                <el-input v-model="goodsLocation.cargoNo"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="货架编号" :label-width="formLabelWidth">
                <el-input v-model="goodsLocation.addShelves"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属仓库" :label-width="formLabelWidth">
                <el-input v-model="goodsLocation.addWarehouse"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属货区" :label-width="formLabelWidth">
                <el-input v-model="goodsLocation.addCargoArea"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="货区编号" :label-width="formLabelWidth">
                <el-input v-model="goodsLocation.goodsNo"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="主要商品" :label-width="formLabelWidth">
                <el-input v-model="goodsLocation.product"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="负责人" :label-width="formLabelWidth">
                <el-input v-model="goodsLocation.person" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="goodsLocation.telephone" autocomplete="off"></el-input>
            </el-form-item>
            <span>创建时间：{{goodsLocation.creatTime}}</span>
            <br>
            <span>货位状态：{{goodsLocation.status}}</span>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="goodsLocation.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="modifyRole()">确 定</el-button>
        </div>
    </el-dialog>
    <!--分页插件-->
    <div style="float: right;">
    <el-pagination
            background
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
    </div>
</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                tableData:null,
                total:null,
                current:1,
                pageSize:10,
                dialogFormVisible:false,
                dialogFormVisible2:false,
                search:'',//搜索框
                options: [{
                    value: 10,
                    label: 10,
                }, {
                    value: 25,
                    label: 25,
                }, {
                    value: 50,
                    label: 50,
                }, {
                    value: 100,
                    label: 100,
                }],
                value: 10,
                selectWarehouse:[{
                    id:'',
                    wareName:''
                }],
                addWarehouse:'',
                selectCargoArea:[{
                    id:'',
                    goodsName:''
                }],
                addCargoArea:'',
                selectShelves:[{
                    id:'',
                    shelvesNo:''
                }],
                addShelves:'',
                goodsLocation:{
                    id:null,
                    //warehouseId:null,
                    addWarehouse:null,
                    //cargoAreaId:null,
                    addCargoArea:null,
                    //shelvesId:null,
                    addShelves:null,
                    cargoNo:null,
                    goodsNo:null,
                    person:null,
                    product:null,
                    telephone:null,
                    creatTime:null,
                    status:null,
                    remark:null
                },
                formInline: {
                    shelvesNo: null,
                    cargoNo: null,
                    status: null
                },
                formLabelWidth:false

            };
        },
        mounted(){
            this.loadPage(1,10)

        },
        methods: {

            loadPage(current,pageSize){
                this.current=current
                pageSize=this.value
                axios.get("/cargoes?current="+this.current+"&pageSize="+pageSize)
                    .then(value => {
                        this.tableData=value.data.data.records;
                        this.total=value.data.data.total
                        this.current=value.data.data.current
                        this.pageSize=value.data.data.pageSize
                    })
            },
            roleEdit(index,row){
                //console.log(row);
                let s = '';
                if (row.status=="有货"){
                    s="无货"
                }
                if (row.status=="无货"){
                    s="有货"
                }
                //console.log(row.status)

                this.$confirm('确定要修改为'+s+'状态吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                    axios.put("/cargoes?id="+row.id+"&status="+s)
                        .then(value => {
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            this.loadPage(this.current,this.pageSize)
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消修改'
                        });
                    });

            },
            closeMyDialog(){

                this.goodsLocation={
                    id:null,
                    //warehouseId:null,
                    addWarehouse:null,
                    //cargoAreaId:null,
                    addCargoArea:null,
                    //shelvesId:null,
                    addShelves:null,
                    cargoNo:null,
                    goodsNo:null,
                    person:null,
                    product:null,
                    telephone:null,
                    creatTime:null,
                    status:null,
                    remark:null
                }
                this.selectWarehouse=[{
                    id:null,
                    wareName:null
                }]
                    this.addWarehouse=null
                    this.selectCargoArea=[{
                    id:null,
                    goodsName:null
                }]
                    this.addCargoArea=null
                    this.selectShelves=[{
                    id:null,
                    shelvesNo:null
                }]
                    this.addShelves=null
            },
            saveRole(){
                this.dialogFormVisible=false
                //console.log(this.goodsLocation)
                if (this.goodsLocation.id==null){
                    this.goodsLocation.addWarehouse=this.addWarehouse;
                    this.goodsLocation.addCargoArea=this.addCargoArea;
                    this.goodsLocation.addShelves=this.addShelves;
                    axios.post("/cargoes",Qs.stringify(this.goodsLocation))
                        .then(value => {
                            if (value.data.code==1){
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                                this.loadPage(this.current,this.pageSize)
                            }
                            if (value.data.code==0)
                                this.$message({
                                    type: 'info',
                                    message: '货位已存在，不可再次添加!'
                                });
                        })
                }
            },

            roleModify(index,row){
                this.dialogFormVisible2=true;
                this.goodsLocation={
                    id:row.id,
                    //warehouseId:row.twares[0].id,
                    addWarehouse:row.twares[0].wareName,
                    //cargoAreaId:row.tcargoAreas[0].id,
                    addCargoArea:row.tcargoAreas[0].goodsName,
                    //shelvesId:row.tshelves[0].id,
                    addShelves:row.tshelves[0].shelvesNo,
                    cargoNo:row.cargoNo,
                    goodsNo:row.tcargoAreas[0].goodsNo,
                    person:row.twares[0].person,
                    product:row.product,
                    telephone:row.twares[0].telephone,
                    creatTime:row.creatTime,
                    status:row.status,
                    remark:row.remark
                }
            },
            modifyRole(){
                this.dialogFormVisible2=false
                axios.put("/cargoes2",Qs.stringify(this.goodsLocation))
                    .then(value => {
                        if (value.data.code==1){
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        }
                        if (value.data.code==0){
                            this.$message({
                                type: 'info',
                                message: value.data.data
                            });
                        }
                        this.loadPage(this.current,this.pageSize)
                    })
            },
            changePageSize(){
                this.pageSize=this.value
                this.loadPage(1,this.pageSize)
            },
            searchChange(){
                //console.log(this.search.length)
                if (this.search.length>0){
                    axios.get("/cargoSearch?search="+this.search)
                        .then(value => {
                            this.tableData=value.data.data
                            this.total=value.data.data.total
                            //this.current=value.data.data.current
                            //this.pageSize=value.data.data.pageSize
                        })
                }else {
                    this.loadPage(1,10)
                }

            },

            open(){
                this.dialogFormVisible = true
                axios.get("/wareEach")
                    .then(value => {
                        //console.log(value.data.data)
                        this.selectWarehouse=value.data.data
                    })
            },

            //根据仓库的字段查货区
            warehouseChange(){
                axios.get("/cargoAreas?wareId="+this.addWarehouse)
                    .then(value => {
                        //console.log(value.data.data)
                        this.selectCargoArea=value.data.data
                        this.addCargoArea=null
                        this.selectShelves=[{
                            id:null,
                            shelvesNo:null
                        }]
                        this.addShelves=null

                    })
            },
            //根据货区查货架
            cargoAreaChange(){
                console.log("货区："+this.addCargoArea)
                axios.get("/shelves?damId="+this.addCargoArea)
                    .then(value => {
                        //console.log(value.data.data)
                        this.selectShelves=value.data.data
                        this.addShelves=null
                    })
            },
            onSubmit(){
                console.log(this.formInline.shelvesNo)
                console.log(this.formInline.cargoNo)
                console.log(this.formInline.status)
                if (this.formInline.shelvesNo!=''  && this.formInline.cargoNo!='' && this.status!=''){
                    axios.get("/cargoInline?shelvesNo="+this.formInline.shelvesNo+"&cargoNo="+this.formInline.cargoNo+"&status="+this.formInline.status
                                +"&current="+this.current+"&pageSize="+this.pageSize)
                        .then(value => {
                            //console.log(value)
                            this.tableData=value.data.data;
                        })
                }else {
                    this.loadPage(1,10)
                    alert("有空")
                }

            },
        }
    });
</script>
</html>